/*
         *  公式:  小图/大图=小区域/大区域
         *   只能修改小区域
         *   小区域=(小图/大图)*大区域
         *   scale= 大区域/小区域
         * */

        $(window).on("load", function () {
            var $smallImg = $(".smallImg");//小图
            var $bigImg = $(".BigImg");//大图
            var $bigArea = $(".BigArea");//大区域
            console.log(11111111);
            $(".smallArea").css({
                width: ($smallImg.width() / $bigImg.width()) * $bigArea.width(),
                height: ($smallImg.height() / $bigImg.height()) * $bigArea.height()
            })
            console.log($(".smallArea").width());
            //给小图添加鼠标移入事件
            $(".smallImg").on("mouseover", function () {
                $(".smallArea").show();
                $(".BigArea").show();
            }).on("mouseout", function () {
                $(".smallArea").hide();
                $(".BigArea").hide();
            }).on("mousemove", function (e) {
                var mX = e.pageX - $(this).offset().left - $(".smallArea").width() / 2;
                var mY = e.pageY - $(this).offset().top - $(".smallArea").height() / 2;
                if (mX <= 0) {
                    mX = 0;
                }
                if (mX >= $(".smallImg").width() - $(".smallArea").width()) {
                    mX = $(".smallImg").width() - $(".smallArea").width()
                }
                if (mY <= 0) {
                    mY = 0;
                }
                if (mY >= $(".smallImg").height() - $(".smallArea").height()) {
                    mY = $(".smallImg").height() - $(".smallArea").height()
                }
                $(".smallArea").css({
                    left: mX,
                    top: mY
                })

                //计算比例
                // scale= 大区域/小区域

                var oScale = $bigArea.height() / $(".smallArea").height();
                console.log(oScale)

                $(".BigArea>.BigImg").css({
                    left: oScale * -mX,
                    top: oScale * -mY
                })
                console.log($(".BigImg").offset());
            })

            //给article1LeftBottom里的li添加鼠标移入事件
            $(".article1LeftBottom>ul>li").on("mouseenter",function(){
                $(".article1LeftBottom>ul>li").css("border","none");
                $(this).css("border","1px solid #ee1f41");
                $index = $(this).index();
                console.log($index);
                $(".smallImg>img").css("display","none");
                $(".smallImg>img").eq($index).css("display","block");
                $(".BigArea>img").removeClass("BigImg");
                $(".BigArea>img").eq($index).addClass("BigImg");
                $(".BigArea>img").css("display","none");
                $(".BigArea>img").eq($index).css("display","block");
            })

            //给header里的li添加点击事件
            $(".header>ul>li").on("click",function(){
                $index = $(this).index();
                $(".header>ul>li>a").removeClass("selected");
                $(this).find('a').addClass("selected");
                if($index==0){
                    $(".detailIntroduction").css("display","block");
                    $(".detailIntroduction").css("height","3946px");
                    $(".detailIntroduction>.Introduction").css("display","block");
                    $(".detailIntroduction>.AfterService").css("display","block");
                    $(".detailIntroduction>.basicInformation").css("display","none");
                }else if($index==1){
                    $(".detailIntroduction").css("display","block");
                    $(".detailIntroduction").css("height","1758px");
                    $(".detailIntroduction>.Introduction").css("display","none");
                    $(".detailIntroduction>.AfterService").css("display","block");
                    $(".detailIntroduction>.basicInformation").css("display","block");
                }else if($index==2){
                    $(".detailIntroduction").css("display","block");
                    $(".detailIntroduction").css("height","1105px");
                    $(".detailIntroduction>.Introduction").css("display","none");
                    $(".detailIntroduction>.AfterService").css("display","block");
                    $(".detailIntroduction>.basicInformation").css("display","none");
                }else if($index==3){
                    $(".detailIntroduction").css("display","none");
                }
            })
        })